import React from 'react';
import Star from './star';
import PropTypes from 'prop-types';
import createClass from 'create-react-class';
import './star.css';


class StarRating extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            startsSeleted: 0
        }
        this.change = this.change.bind(this)
    }
    change(starsSelected) {
        this.setState({ startsSeleted:starsSelected });
        const { onRate ,cId} = this.props;
        // console.log('-----000---',cId,starsSelected)
        onRate(starsSelected);
    }
    render() {
        const { totalStars } = this.props;
        const { startsSeleted } = this.state;
        return (
            <div className="star-rating">
                {
                    [...Array(totalStars)].map((n, i) =>
                        <Star key={i}
                        selected = {i < startsSeleted}
                            onClick={() => this.change(i + 1)}
                        />
                    )
                }
                <p>
                    {startsSeleted} of {totalStars} stars
                </p>
            </div>
        )
    }
}
StarRating.prototypes = {
    totalStars: PropTypes.number
}
StarRating.defaultProps = {
    totalStars: 5
}
/*
const StartRating = createClass({
    displayName: 'star-common',
    // 属性验证
    propTypes: {
        totalStars: PropTypes.number
    },
    // 默认属性
    getDefaultProps() {
        return {
            totalStars: 5
        }
    },
    // 实例方法（入口）
    getInitialState() {
        return {
            starsSelected: 0
        }
    },
    // 在组件render之前
    componentWillMount() {
        const { starsSelected } = this.props;
        if (starsSelected) {
            this.setState({ starsSelected })
        }
    },
    componentWillUpdate() {
        console.log(123)

    },
    // 方法
    change(starsSelected) {
        this.setState({ starsSelected })
    },
    // 渲染方法
    render() {
        const { totalStars } = this.props;
        const { starsSelected } = this.state;
        return (
            <div className="star-rating">
                {
                    [...Array(totalStars)].map((n, i) =>
                        <Star key={i}
                            selected={i < starsSelected}
                            onClick={() => this.change(i + 1)}
                        />
                    )
                }
                <p>
                    {starsSelected} of {totalStars} stars
                </p>
            </div>
        )
    }
})
*/
export  {StarRating};